<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
	<title>详情</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="msapplication-tap-highlight" content="no">

<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--Polyfill-->
	<!--[if lt IE 9]>
	<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-shim.js"></script>
	<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-sham.js"></script>
	<![endif]-->

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.2.js" charset="utf-8"></script>

	<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- //fonts -->
</head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
		  <input type="hidden" id="id" name="id" th:value="${id}" >


        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="" /></h1></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="Search...">
					<input type="submit" value=" ">
				</form>
			</div>
			<div th:include="header :: header"></div>
        </div>
		<div class="clearfix"> </div>
      </div>
    </nav>
	<div th:include="menu :: menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="show-top-grids">
				<div class="col-sm-8 single-left">
					<div class="song">
						<div class="song-info">
							<h3 id="roomTitle" name="roomTitle">热门主播人气飙升0000</h3>
							<!--<input id="roomTitle" name="roomTitle" type="text">-->
					</div>
						<div id="video-container" style="width:100%; height:auto;"></div>
						<!--<div class="video-grid">
							&lt;!&ndash;<iframe src="https://www.youtube.com/embed/oYiT-vLjhC4" allowfullscreen></iframe>&ndash;&gt;
							<div id="video-container" style="width:100%; height:auto;"></div>
						</div>-->
					</div>
					<div class="song-grid-right">
						<!--<div class="share">
							<h5>Share this</h5>
							<ul>
								<li><a href="#" class="icon fb-icon">Facebook</a></li>
								<li><a href="#" class="icon dribbble-icon">Dribbble</a></li>
								<li><a href="#" class="icon twitter-icon">Twitter</a></li>
								<li><a href="#" class="icon pinterest-icon">Pinterest</a></li>
								<li><a href="#" class="icon whatsapp-icon">Whatsapp</a></li>
								<li><a href="#" class="icon like">Like</a></li>
								<li><a href="#" class="icon comment-icon">Comments</a></li>
								<li class="view">200 Views</li>
							</ul>
						</div>-->
					</div>
					<div class="clearfix"> </div>
					<div class="published">
						<script src="js/jquery.min.js"></script>
							<script>
								$(document).ready(function () {
									size_li = $("#myList li").size();
									x=1;
									$('#myList li:lt('+x+')').show();
									$('#loadMore').click(function () {
										x= (x+1 <= size_li) ? x+1 : size_li;
										$('#myList li:lt('+x+')').show();
									});
									$('#showLess').click(function () {
										x=(x-1<0) ? 1 : x-1;
										$('#myList li').not(':lt('+x+')').hide();
									});
								});
							</script>
							<div class="load_more">	
								<ul id="myList">
									<li>
										<h4>主播人1号种子</h4>
										<p id="roomDesc" name="roomDesc">人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播</p>
									</li>
									<li>
										<p>Nullam fringilla sagittis tortor ut rhoncus. Nam vel ultricies erat, vel sodales leo. Maecenas pellentesque, est suscipit laoreet tincidunt, ipsum tortor vestibulum leo, ac dignissim diam velit id tellus. Morbi luctus velit quis semper egestas. Nam condimentum sem eget ex iaculis bibendum. Nam tortor felis, commodo faucibus sollicitudin ac, luctus a turpis. Donec congue pretium nisl, sed fringilla tellus tempus in.</p>
										<p>Nullam fringilla sagittis tortor ut rhoncus. Nam vel ultricies erat, vel sodales leo. Maecenas pellentesque, est suscipit laoreet tincidunt, ipsum tortor vestibulum leo, ac dignissim diam velit id tellus. Morbi luctus velit quis semper egestas. Nam condimentum sem eget ex iaculis bibendum. Nam tortor felis, commodo faucibus sollicitudin ac, luctus a turpis. Donec congue pretium nisl, sed fringilla tellus tempus in.</p>
										<div class="load-grids">
											<div class="load-grid">
												<p>Category</p>
											</div>
											<div class="load-grid">
												<a href="movies.html">Entertainment</a>
											</div>
											<div class="clearfix"> </div>
										</div>
									</li>
								</ul>
							</div>
					</div>
					<div class="all-comments">
						<div class="all-comments-info">

						</div>
						<div class="media-grids">
							<div class="media">
								<h5>热门推荐</h5>
								<div class="media-left">
									<a href="#">

									</a>
								</div>
								<div class="media-body">
									<p>热门推荐热门推荐热门推荐热门推荐热门推荐热门推荐热门推荐热门推荐</p>
								</div>
							</div>

						</div>
					</div>
				</div>
				<div class="col-md-4 single-right">
					<h3>Up Next</h3>
					<div class="single-grid-right">
						<div class="single-right-grids">
							<div class="col-md-4 single-right-grid-left">
								<a href="/single"><img src="images/r1.jpg" alt="" /></a>
							</div>
							<div class="col-md-8 single-right-grid-right">
								<a href="/single" class="title">热门1111</a>
								<p class="author"><a href="#" class="author">铁柱</a></p>
								<p class="views">2,114,200 浏览</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="single-right-grids">
							<div class="col-md-4 single-right-grid-left">
								<a href="/single"><img src="images/r2.jpg" alt="" /></a>
							</div>
							<div class="col-md-8 single-right-grid-right">
								<a href="/single" class="title"> 热门2222</a>
								<p class="author"><a href="#" class="author">明白</a></p>
								<p class="views">2,114,200 浏览 </p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="single-right-grids">
						<div class="col-md-4 single-right-grid-left">
							<a href="/single"><img src="images/r3.jpg" alt="" /></a>
						</div>
						<div class="col-md-8 single-right-grid-right">
							<a href="/single" class="title"> 热门3333</a>
							<p class="author"><a href="#" class="author">飞行</a></p>
							<p class="views">2,114,200 浏览</p>
						</div>
						<div class="clearfix"> </div>
					</div>
						<div class="single-right-grids">
							<div class="col-md-4 single-right-grid-left">
								<a href="/single"><img src="images/r3.jpg" alt="" /></a>
							</div>
							<div class="col-md-8 single-right-grid-right">
								<a href="/single" class="title"> 热门3333</a>
								<p class="author"><a href="#" class="author">飞行</a></p>
								<p class="views">2,114,200 浏览</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="single-right-grids">
							<div class="col-md-4 single-right-grid-left">
								<a href="/single"><img src="images/r3.jpg" alt="" /></a>
							</div>
							<div class="col-md-8 single-right-grid-right">
								<a href="/single" class="title"> 热门3333</a>
								<p class="author"><a href="#" class="author">飞行</a></p>
								<p class="views">2,114,200 浏览</p>
							</div>
							<div class="clearfix"> </div>
						</div>

					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!-- footer -->
			<div class="footer">

			</div>
			<!-- //footer -->
		</div>
		<div class="clearfix"> </div>
	<div class="drop-menu">
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
		  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
		  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
		  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
		</ul>
	</div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
	<script>
        $(document).ready(function(){
            var id = document.getElementById("id").value;
            var roomTitle;
            var roomDesc;
            var chatroomId;
            var pushUrl;
            var rtmpPullUrl;
            var coverPic;
            var pullUrl;

            var formData = new FormData();
            formData.append("id",id);
            $.ajax({
                url: "/detailRoomInfo",
                type: 'POST',
                data: formData,
                async:false,
                processData:false,
                contentType:false,
                success: function (data) {
                    console.log(data);

                    roomTitle = data.data.roomTitle;
                    roomDesc = data.data.roomDesc;
                    chatroomId = data.data.chatroomId;
                    pushUrl = data.data.pushUrl;
                    rtmpPullUrl = data.data.rtmpPullUrl;
                    coverPic = data.data.coverPic;
                    pullUrl = data.data.pullUrl;
                    console.log(pullUrl);
                    document.getElementById('roomTitle').innerHTML=roomTitle;
                    document.getElementById('roomDesc').innerHTML=roomDesc;

                    console.log(rtmpPullUrl);
                    console.log("http://"+pullUrl+"."+"flv");
                },
                error: function (data) {
                    console.log(data.code);
                }
            });
			/* 920*1080分辨率的视频，码率应该在8M以上。
				1080*720的分辨率，应该在5M左右
				720*576分辨率，应该在3M左右
				640*480分辨率，应该在1.5M左右
				320*240的分辨率，应该在600K左右 */
            var player = new TcPlayer('video-container', {
                "m3u8": "http://"+pullUrl+"."+"m3u8", //请替换成实际可用的播放地址
                //"m3u8": "http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer-cover.html", //请替换成实际可用的播放地址
                //"m3u8": rtmpPullUrl, //请替换成实际可用的播放地址
                //"rtmp": rtmpPullUrl, //请替换成实际可用的播放地址
                //"rtmp": "rtmp://push.hc-stone.cn/live/666", //请替换成实际可用的播放地址
                "flv": "http://"+pullUrl+"."+"flv", //请替换成实际可用的播放地址
				/*"m3u8_hd" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8",
                "m3u8_sd" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8",*/
                "autoplay" : true, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
                "coverpic" : coverPic, //播放器设置封面
                "wording": {
                    2032: "请求视频失败，请检查网络",
                    2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
                },
                "width" : '460',//视频的显示宽度，请尽量使用视频分辨率宽度480
                "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度320
            });
        });

        /*(function () {
            function getParams(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				console.log("name:"+name)
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    console.log("r:"+r)
                    return decodeURIComponent(r[2]);
                }
                return null;
            }

            function getPathParams() {
                var path = location.pathname.split('/');
                if (path[1] == 'vod-player') {
                    return {
                        'path': location.origin + path.slice(0, 4).join('/'),
                        'appid': path[2],
                        'fileid': path[3]
                    }
                } else {
                    return null;
                }
            }

            var rtmp = getParams('rtmp'),
                flv = getParams('flv'),
                m3u8 = getParams('m3u8'),
                mp4 = getParams('mp4'),
                live = (getParams('live') == 'true' ? true : false),
                //coverpic = getParams('coverpic'),
                coverpic="http://www.test.com/myimage.jpg", //播放器设置封面
                width = getParams('width'),
                height = getParams('height'),
                volume = getParams('volume'),
                //flash = (getParams('flash') == 'true' ? true : false),
                flash = false,
                x5_player = (getParams('x5_player') == 'false' ? false : true),
                h5_flv = (getParams('h5_flv') == 'true' ? true : false),
                autoplay = (getParams('autoplay') == 'true' ? true : false),

                flashUrl = (function () {
                    var params = getPathParams();
                    if (params) {
                        return params.path + '/player/release/QCPlayer.swf';
                    }
                    return '//imgcache.qq.com/open/qcloud/video/player/release/QCPlayer.swf'
                })(),
                log = getParams('log');
            /!**
             * 视频类型播放优先级
             * mobile ：m3u8>mp4
             * PC ：RTMP>flv>m3u8>mp4
             *!/
            var pullRtmpUrl = document.getElementById("pullRtmpUrl");
            $.ajax({
                url: "/singleDate",
                type: 'POST',
                data: '',
                async:false,
                processData:false,
                contentType:false,
                success: function (data) {
                    console.log(data);

                    pullRtmpUrl = data.data.pullRtmpUrl;
                    console.log(pullRtmpUrl);
                },
                error: function (data) {
                    console.log(data.code);
                }
            });
            var options = {
                rtmp: pullRtmpUrl,
                flv: pullRtmpUrl ,
                m3u8: m3u8 || pullRtmpUrl ,
                m3u8_hd:pullRtmpUrl,
                m3u8_sd: pullRtmpUrl,
                mp4: mp4 || pullRtmpUrl,
                //autoplay: autoplay,
                autoplay: true,
                live: live,
                width: width || '480',
                height: height || '320',
                volume: volume || 0.5,
                flash: false,
                flashUrl: flashUrl,
                x5_player: x5_player,
                h5_flv: h5_flv,
                wording: {
                    2032: '请求视频失败，请检查网络',
                    2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
                },
                listener: function (msg) {

                }
            };
            console.log("options+rtmp:"+options.rtmp)
            console.log("options+flv:"+options.flv)
            console.log("options+mp4:"+options.mp4)
            console.log("options+m3u8:"+options.m3u8)
            console.log("options+flash:"+options.flash)
            window.tcplayer = new TcPlayer('video-container', options);

        })();*/

	</script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
  </body>
</html>